<template>
  <div>
    <elementForm
        ref="eleForm"
        :asterisk="true"
        :inline="true"
        :form="form"
        size="medium"
        @onExceed="onExceed"
        :rules="rules"
        :form-label="formLabel"
        class="eleForm"
        label-position="top"
        label-width="200px"
        @beforeUpload="beforeUpload"
        @upLoad="upLoad"
        @getDate="changeDate"
    ></elementForm>
  </div>
</template>

<script>
// import eleForm from 'vue-ele-forms'
import elementForm from "@/package/elementForm/elementForm";
export default {
  name: "forms",
  components: { elementForm },
  data(){
    return{
      form: {
        url: [],
        picUrl: '',
        inputNumber: '',
        input: '',
        radio: 1,
        option: '',
        date: '',
      },
      formLabel: [],
      rules: {
        url: [{ required: true, message: '请输入海报地址', trigger: 'blur' }],
        picUrl: [{ required: true, message: '请输入图文消息图片url', trigger: 'blur' }],
      }
    }
  },
  computed: {
    formList () {
      return [
        {
          prop: 'url',
          label: '海报地址',
          type: 'upload',
          api: '/marketplatform/api/upload/images',
          headers: {Authorization: `Bearer ${localStorage.getItem('token')}`},
          loading: false,
          multiple: true,
          limit: 4,
          'list-type': 'picture-card'
        },
        {
          prop: 'picUrl',
          label: '图文消息图片url',
          type: 'upload',
          api: '/marketplatform/api/upload/images',
          headers: {Authorization: `Bearer ${localStorage.getItem('token')}`},
          loading: false,
          limit: 1,
          'list-type': 'picture-card'
        },
        { prop: 'inputNumber', label: '计数器', type: 'inputNumber', disabled: true },
        { prop: 'input', label: '输入框', type: 'input' },
        {
          prop: 'radio',
          label: '单选框',
          disabled: false,
          type: 'radio',
          radio: [ { val: 1, name: '男', disabled: false  }, { val: 0, name: '女', disabled: true  } ]
        },
        {
          prop: 'option',
          label: '下拉框',
          disabled: false,
          type: 'option',
          option: [
            { label: '前端工程师', value: 0, disabled: false  },
            { label: '后端工程师', value: 1, disabled: true  },
            { label: 'UI设计师', value: 2, disabled: false  },
          ]
        },
        {
          label: '时间组件',
          type: 'date',
          prop: 'date',
          placeholder: '请选择注册时间',
          size: 'small',
          disabled: false,
          dateType: 'datetimerange'
        }
      ]
    }
  },
  mounted () {
    this.formLabel = this.formList
  },
  methods: {
    // 上传
    upLoad (res, name) {
      if (typeof this.form[name] === 'string'){
        this.form[name] = res.data.path
      }else {
        this.form[name].push({ img: res.data.path })
      }
    },
    // 上传之前验证
    beforeUpload (file, res, err) {
      res(file) // 条件成立直接甩出去
    },
    onExceed(){
      this.$message.warning('超出上传文件总数！')
    },
    changeDate(value){
      console.log(value)
    },
  }
}
</script>

<style scoped>

</style>
